<template>
  <div id="home">
    <left></left>
    <div class="main">
      <div class="main-content nui-scroll">
        <div class="main-phone">
          <menus></menus>
        </div>
      </div>
      <div class="main-right nui-scroll">
        <menuChange></menuChange>
      </div>
    </div>
  </div>
</template>

<script>
import left from "../../components/left/left";
import menus from '../../components/group/menu/menu'
import menuChange from '../../components/group/menu/menuChange'
export default {
  name: "home",
  data() {
    return {
      
    };
  },
  components: {
    left,
   menus,
   menuChange
  },
  computed: {},
  created() {},
  methods: {},
};
</script>


<style lang="less" scoped>
@import url("../../assets/css/base.less");
#home {
  display: flex;
  width: 100%;
  .main {
    display: flex;
    width: 100%;
    border-radius: 5px 0 0 0;
    background-color: #f4f6f8;
    overflow: hidden;
    > div {
      height: calc(100vh - 60px);
      overflow-y: scroll;
    }
    .main-content {
      width: calc(100% - 540px);
      display: flex;
      justify-content: center;
      align-items: center;
      .main-phone {
        margin: auto;
        width: 375px;
        height: 667px;
        padding: 10px;
        background: url('../../assets/img/blank-bg.png') no-repeat;
        background-size: 100%;
        box-shadow: 0px 4px 14px rgba(133, 148, 162, 0.2);
        position: relative;
      }
    }
    .main-right {
      width: 540px;
      background-color: #fff;
    }
  }
}
</style>
